<template>
    <div class="page-header" v-if="article">
        <div class="page-title">
            <h1 class="article-title">{{ article.articleTitle }}</h1>
            <div class="article-meta">
                <div class="first-meta">
                    <span><svg-icon icon-class="calendar" style="margin-right:0.15rem;"></svg-icon>
                        <span class="text">发表于 </span>{{ formatDate(article.createTime) }}
                    </span>
                    <span class="item" v-if="article.updateTime"><svg-icon icon-class="update"
                            style="margin-right:0.15rem;"></svg-icon>
                        <span class="text">更新于 </span>{{ formatDate(article.updateTime) }}
                    </span>
                    <span class="item"><svg-icon icon-class="eye" style="margin-right:0.15rem;"></svg-icon>
                        <span class="text">阅读量 </span>{{ article.viewCount }}</span>
                </div>
                <div class="second-meta">
                    <span><svg-icon icon-class="edit" size="0.9rem" style="margin-right:0.15rem;"></svg-icon>
                        <span class="text">字数统计 </span>{{ count(wordNum) }} 字
                    </span>
                    <span class="item"><svg-icon icon-class="clock" style="margin-right:0.15rem;"></svg-icon>
                        <span class="text">阅读时长 </span>{{ readTime }} 分钟
                    </span>
                    <span class="item">
                        <svg-icon icon-class="category" style="margin-right:0.15rem;"></svg-icon>{{
                            article.category.categoryName
                        }}
                    </span>
                </div>
            </div>
        </div>
        <img class="page-cover" :src="article.articleCover" alt="">
        <!-- 波浪 -->
        <Waves></Waves>
    </div>
    <div class="bg">
        <div class="main-container" v-if="article">
            <div class="left-container" :class="app.sideFlag ? 'test' : ''">
                <div class="article-container">
                    <v-md-preview ref="articleRef" class="md" v-viewer :text="article.articleContent"></v-md-preview>
                    <div class="article-post">
                        <div class="tag-share">
                            <router-link :to="`/tag/${tag.id}`" class="article-tag" v-for="tag in article.tagVOList"
                                :key="tag.id">
                                <svg-icon icon-class="tag" size="0.8rem"></svg-icon>
                                {{ tag.tagName }}
                            </router-link>
                            <Share class="share-info" :url="articleHref" :title="article.articleTitle"></Share>
                        </div>
                        <div class="reward">
                            <button class="btn" :class="isLike(article.id)" @click="like">
                                <svg-icon icon-class="like" size="0.9rem"></svg-icon> 点赞
                                <span>{{ article.likeCount }}</span>
                            </button>
                            <n-popover trigger="click" v-if="blog.siteConfig.isReward">
                                <template #trigger>
                                    <button class="btn reward-btn">
                                        <svg-icon icon-class="qr_code" size="0.9rem"></svg-icon>
                                        打赏
                                    </button>
                                </template>
                                <div class="reward-all">
                                    <span>
                                        <img class="reward-img" v-lazy="blog.siteConfig.weiXinCode" />
                                        <div class="reward-desc">微信</div>
                                    </span>
                                    <span style="margin-left: 0.3rem;">
                                        <img class="reward-img" v-lazy="blog.siteConfig.aliCode" />
                                        <div class="reward-desc">支付宝</div>
                                    </span>
                                </div>
                            </n-popover>
                            <p class="tea" v-if="blog.siteConfig.isReward">请我喝[茶]~(￣▽￣)~*</p>
                        </div>
                        <div class="copyright">
                            <ul>
                                <li class="author">
                                    <svg-icon icon-class="author" size="0.9rem" style="margin-right:0.3rem"></svg-icon>
                                    <strong>本文作者： </strong>{{ blog.siteConfig.siteAuthor }}
                                </li>
                                <li class="link">
                                    <svg-icon icon-class="article_link" size="0.9rem"
                                        style="margin-right:0.3rem"></svg-icon>
                                    <strong>本文链接：</strong>
                                    <a :href="articleHref">{{ articleHref }}</a>
                                </li>
                                <li class="license">
                                    <svg-icon icon-class="article_share" size="0.8rem"
                                        style="margin-right:0.3rem"></svg-icon>
                                    <strong>版权声明： </strong>本站所有文章除特别声明外，均采用
                                    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh"
                                        target="_blank">CC
                                        BY-NC-SA 4.0</a>
                                    许可协议。转载请注明文章出处！
                                </li>
                            </ul>
                        </div>
                        <!-- 上下文 -->
                        <div class="post-nav">
                            <div class="item" v-if="article.lastArticle">
                                <router-link :to="`/article/${article.lastArticle?.id}`" class="post-cover"
                                    :style="articleCover(article.lastArticle.articleCover)">
                                    <span class="post-last-next">上一篇</span>
                                    <h3 class="post-title">{{ article.lastArticle.articleTitle }}</h3>
                                </router-link>
                            </div>
                            <div class="item" v-if="article.nextArticle">
                                <router-link :to="`/article/${article.nextArticle?.id}`" class="post-cover"
                                    :style="articleCover(article.nextArticle.articleCover)">
                                    <span class="post-last-next">下一篇</span>
                                    <h3 class="post-title">{{ article.nextArticle.articleTitle }}</h3>
                                </router-link>
                            </div>
                        </div>
                        <CommentList :comment-type="commentType"></CommentList>
                    </div>
                </div>
            </div>
            <div class="right-container" :class="app.sideFlag ? 'temp' : ''">
                <div class="side-card">
                    <Catalog v-if="articleLoaded" :domRef="articleRef"></Catalog>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getArticle, likeArticle } from "@/api/article";
import { ArticleInfo, ArticlePagination } from "@/api/article/types";
import { CategoryVO } from "@/api/category/types";
import useStore from "@/store";
import { formatDate } from "@/utils/date";
import { Share } from 'vue3-social-share';
import 'vue3-social-share/lib/index.css';
const { app, blog, user } = useStore();
const articleRef = ref();
const route = useRoute();
const articleHref = window.location.href;
const data = reactive({
    articleLoaded: false,
    wordNum: 0,
    readTime: 0,
    commentType: 1,
    article: {
        id: 0,
        articleCover: "",
        articleTitle: "",
        articleContent: "",
        articleType: 0,
        viewCount: 0,
        likeCount: 0,
        category: {} as CategoryVO,
        tagVOList: [],
        createTime: "",
        lastArticle: {} as ArticlePagination,
        nextArticle: {} as ArticlePagination,
        updateTime: ""
    } as ArticleInfo,
});
const { articleLoaded, wordNum, readTime, commentType, article } = toRefs(data);
const articleCover = computed(() => (cover: string) => 'background-image:url(' + cover + ')');
const isLike = computed(() => (id: number) => user.articleLikeSet.indexOf(id) != -1 ? "like-btn-active" : "like-btn");
const count = (value: number) => {
    if (value >= 1000) {
        return (value / 1000).toFixed(1) + "k";
    }
    return value;
};
const deleteHTMLTag = (content: string) => {
    return content
        .replace(/<\/?[^>]*>/g, "")
        .replace(/[|]*\n/, "")
        .replace(/&npsp;/gi, "");
};
const like = () => {
    if (!user.id) {
        app.setLoginFlag(true);
        return;
    }
    let id = article.value.id;
    likeArticle(id).then(({ data }) => {
        if (data.flag) {
            //判断是否点赞
            if (user.articleLikeSet.indexOf(id) != -1) {
                article.value.likeCount -= 1;
            } else {
                article.value.likeCount += 1;
            }
            user.articleLike(id);
        }
    });
};
onMounted(() => {
    getArticle(Number(route.params.id)).then(({ data }) => {
        article.value = data.data;
        document.title = article.value.articleTitle;
        wordNum.value = deleteHTMLTag(article.value.articleContent).length;
        readTime.value = Math.round(wordNum.value / 400);
        articleLoaded.value = true;
    })
})
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";

.article-container {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0 1rem var(--box-bg-shadow);
}

.article-post {
    margin: 0 2rem;
}

.article-title {
    font-weight: 500;
    font-size: 2.5rem;
    letter-spacing: 0.125rem;
    text-align: center;
    color: var(--header-text-color);
}

.article-meta {
    @include flex;
    flex-direction: column;
    font-size: 0.875rem;

    .item {
        margin-left: 0.625rem;
    }
}

.tag-share {
    display: flex;
    align-items: center;

    .share-info {
        margin-left: auto;
    }
}

.reward {
    margin: 1.25rem auto;
    padding: 0.625rem 0;
    text-align: center;

    .btn {
        border-radius: 0.3125rem;
        color: var(--grey-0);
        cursor: pointer !important;
        padding: 0 0.9375rem;
        font: inherit;
    }

    .like-btn-active {
        background: var(--primary-color);
    }

    .like-btn {
        background: #999;
    }

    .reward-btn {
        position: relative;
        margin-left: 1rem;
        background: var(--primary-color);
    }

    .tea {
        font-size: 0.8125em;
        color: var(--grey-5);
        margin-top: 0.5rem;
    }
}

.reward-all {
    display: flex;
    align-items: center;
}

.reward-img {
    width: 130px;
    height: 130px;
    display: block;
}

.reward-desc {
    margin: -5px 0;
    color: #858585;
    text-align: center;
}

.copyright {
    font-size: 0.75em;
    padding: 1rem 2rem;
    margin-bottom: 2.5rem;
    border-radius: 0.625rem;
    background: var(--grey-2);
    color: var(--grey-6);
}

.post-nav {
    display: flex;
    margin-bottom: 2.5rem;
    border-radius: 0.625rem;
    overflow: hidden;

    .item {
        width: 50%;
    }

    .post-cover {
        display: flex;
        flex-direction: column;
        color: var(--header-text-color);
        padding: 1.25rem 2.5rem;
        background-size: cover;
        animation: blur 0.8s ease-in-out forwards;

        &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #434343, #000);
            opacity: 0.5;
            transition: all 0.2s ease-in-out 0s;
            z-index: -1;
            top: 0;
            left: 0;
        }
    }

    .post-last-next {
        font-size: 0.8125rem;
    }
}

.post-cover:hover::before {
    opacity: 0.4;
}

@media (max-width: 767px) {
    .article-title {
        font-size: 1.5rem;
    }

    .article-meta .text {
        display: none;
    }

    .article-post {
        margin: 0 0.5rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .item {
        width: 100%;
    }

    .reward-img {
        width: 105px;
        height: 105px;
    }

}
</style>
